<template>
	<x-border title="订单管理">
		<x-table v-loading=" fullscreenLoading" @afterTableLoad="afterTableLoad" :isTemplate="true" :showTable="false" ref="xTable" class="admin-order-list">
			<template slot-scope="{ scope }" v-if="async">
				<div class="order_list" v-for="(item,itemIndex) in scope.result.result" :key="itemIndex">
					<div class="order_list_top">
						<div class="order_list_left">
							<div>
								<span>订单编号:</span>
								<router-link tag="span" style="cursor: pointer;" :to="'/admin/order/edit?id='+item.id">{{item.serial}}</router-link>
								<span> {{item.createTime}}</span>
							</div>
						</div>
						<div class="order_list_top_center">{{item.storeName}}</div>
						<div class="order_list_top_right">
							<i class="iconfont zk-tree"></i>
							{{item.regionName}}{{item.address}}
						</div>
					</div>
					<div class="order_list_cont" v-for="(cont,contIndex) in item.outOrderProducts" :key="contIndex">
						<div class="order_list_cont_left">
							<router-link tag="img" class="img" style="cursor: pointer;" :src="$ala.urlImage(cont.thumbnailUrl)" :to="scope.tableActions[0].url+'?id='+item.id"></router-link>
							<div class="order_cont">
								<p>{{cont.name}}</p>
								<p>{{cont.bn}}</p>
							</div>
						</div>
						<div class="order_list_cont_center">
							<span>{{cont.displayPrice}}</span>X{{cont.buyCount}}
						</div>
						<div class="order_list_cont_right" v-if="contIndex===0">
							<div>
								<p>
									<i class="iconfont zk-debt-me"></i>
									<span v-html="item.userName"></span>
								</p>

							</div>
							<div class="price">
								<p>￥{{item.paymentAmount}}元 </p>
								<p>含运费:{{item.expressAmount}}</p>
							</div>
							<div class="order">
								<p class="button">{{item.orderStatuName}}</p>
								<p>
									<router-link class="iconfont zk-userfeedback" tag="i" :to="scope.tableActions[0].url+'?id='+item.id">订单详情</router-link>
								</p>
								<p v-if="false"><i class="iconfont zk-withdrawal"></i>分润详情</p>
							</div>
						</div>
					</div>
				</div>
			</template>
		</x-table>
		<div v-if="$ala.filter() === 3" class="derived-box" slot="headerRight">
			<el-popover placement="bottom-end" trigger="hover">
				<div class="derived_popover">
					<ul>
						<li @click="toExcel()">导出表格</li>
					</ul>
				</div>
				<div class="derived-box_btn" slot="reference">
					<i class="el-icon-more-outline"></i>
				</div>
			</el-popover>
		</div>
	</x-border>
</template>


<script>
	import ala from 'ala'
	export default {
		data() {
			return {
				async: false,
				viewModel: null,
				checked: false,
				fullscreenLoading: false
			}
		},
		props: {
			widgetData: {},
			title: {}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.fullscreenLoading = true
				this.$nextTick(() => {
					if (this.$refs.xTable) {
						this.$refs.xTable.init('OrderTable')
					}
				})
			},
			afterTableLoad(dataResult) {
				this.fullscreenLoading = false
				this.async = true
			},
			async toExcel() {
				this.$refs.xTable.toExcel('OrderTable')
			},
			watchWidgetData(val) {
				this.$refs.xTable.$emit('table_change_widget_data', val)
			}
		},
		watch: {
			// '$route': 'getPath'
			widgetData: 'watchWidgetData'
		}
	}
</script>

<style lang="scss" scoped>
	@import "./var.scss";
</style>